{% extends "tools/base_tool.html" %}

{% block styles %}
<link rel="stylesheet" href="/static/css/weather-checker.css">
{% endblock %}

{% block extra_head %}
<!-- 引入天气图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css">
{% endblock %}

{% block content %}
        
        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header bg-light">
                        <h3 class="card-title h5 mb-0">查询地点天气</h3>
                    </div>
                    <div class="card-body">
                        <form id="weather-form">
                            <div class="mb-3">
                                <label for="location" class="form-label">地点</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="location" placeholder="输入城市名称">
                                    <button class="btn btn-outline-secondary" type="button" id="search-location">
                                        <i data-feather="search"></i> 搜索
                                    </button>
                                    <button class="btn btn-outline-secondary" type="button" id="use-location">
                                        <i data-feather="map-pin"></i> 使用当前位置
                                    </button>
                                </div>
                                <div class="form-text">例如：北京、上海、广州</div>
                                <div id="location-results" class="mt-2 d-none">
                                    <div class="list-group" id="location-results-list">
                                        <!-- 搜索结果将在这里显示 -->
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="date" class="form-label">日期</label>
                                <input type="date" class="form-control" id="date">
                            </div>
                            <button type="button" class="btn btn-primary" id="check-weather">查询天气</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header bg-light">
                        <h3 class="card-title h5 mb-0">摄影建议</h3>
                    </div>
                    <div class="card-body">
                        <div id="weather-loading" class="text-center d-none">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2">正在获取天气数据...</p>
                        </div>
                        
                        <div id="weather-result" class="d-none">
                            <div class="row mb-3">
                                <div class="col-md-6 text-center">
                                    <div class="display-1 mb-2">
                                        <i id="weather-icon" class="wi"></i>
                                    </div>
                                    <h4 id="weather-temp">--°C</h4>
                                    <p id="weather-desc">--</p>
                                </div>
                                <div class="col-md-6">
                                    <ul class="list-group">
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span>日出时间</span>
                                            <span id="sunrise-time">--:--</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span>日落时间</span>
                                            <span id="sunset-time">--:--</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span>风速</span>
                                            <span id="wind-speed">-- km/h</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span>湿度</span>
                                            <span id="humidity">--%</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            
                            <div class="alert alert-info">
                                <h5>摄影建议</h5>
                                <p id="photo-suggestion">请先查询天气获取摄影建议。</p>
                            </div>
                            
                            <div class="mt-3">
                                <h5>黄金时刻</h5>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="card bg-warning text-dark mb-2">
                                            <div class="card-body">
                                                <h6 class="card-title">{{ get_text('morning_golden_hour', current_language) }}</h6>
                                                <p class="card-text" id="morning-golden-hour">--:-- {{ get_text('to', current_language) }} --:--</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card bg-warning text-dark mb-2">
                                            <div class="card-body">
                                                <h6 class="card-title">{{ get_text('evening_golden_hour', current_language) }}</h6>
                                                <p class="card-text" id="evening-golden-hour">--:-- {{ get_text('to', current_language) }} --:--</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div id="weather-error" class="alert alert-danger d-none">
                            <p class="mb-0">{{ get_text('weather_data_error', current_language) }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-light">
                        <h3 class="card-title h5 mb-0">{{ get_text('future_weather_forecast', current_language) }}</h3>
                    </div>
                    <div class="card-body">
                        <div class="row" id="forecast-container">
                            <!-- 天气预报将通过JavaScript动态生成 -->
                            <div class="col-12 text-center text-muted">
                                <p>{{ get_text('check_weather_first', current_language) }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/suncalc@1.9.0/suncalc.js"></script>
<!-- 引入自定义脚本 -->
<script src="/static/js/weather-checker.js"></script>
{% endblock %}